<template>
  <div>
    <settings-section
      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
    >
      <multiselect
        v-model="selectedAgents"
        :options="agentList"
        track-by="id"
        label="name"
        :multiple="true"
        :close-on-select="false"
        :clear-on-select="false"
        :hide-selected="true"
        placeholder="Pick some"
        selected-label
        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
        @select="$v.selectedAgents.$touch"
      />

      <woot-submit-button
        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
        :loading="isAgentListUpdating"
        @click="updateAgents"
      />
    </settings-section>

    <settings-section
      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
    >
      <label class="medium-9 columns settings-item">
        <div class="enter-to-send--checkbox">
          <input
            id="enableAutoAssignment"
            v-model="enableAutoAssignment"
            type="checkbox"
            @change="handleEnableAutoAssignment"
          >
          <label for="enableAutoAssignment">
            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
          </label>
        </div>

        <p class="help-text">
          {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
        </p>
      </label>

      <div
        v-if="enableAutoAssignment && isEnterprise"
        class="max-assignment-container"
      >
        <woot-input
          v-model.trim="maxAssignmentLimit"
          type="number"
          :class="{ error: $v.maxAssignmentLimit.$error }"
          :error="maxAssignmentLimitErrors"
          :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
          @blur="$v.maxAssignmentLimit.$touch"
        />

        <p class="help-text">
          {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
        </p>

        <woot-submit-button
          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
          :disabled="$v.maxAssignmentLimit.$invalid"
          @click="updateInbox"
        />
      </div>
    </settings-section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { minValue } from 'vuelidate/lib/validators'
import alertMixin from '@/yichat.web.share/mixins/alertMixin'
import configMixin from '@/yichat.web.share/mixins/configMixin'
import SettingsSection from '../../../../../components/SettingsSection'

export default {
  components: {
    SettingsSection,
  },
  mixins: [alertMixin, configMixin],
  props: {
    inbox: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {
      selectedAgents: [],
      isAgentListUpdating: false,
      enableAutoAssignment: false,
      maxAssignmentLimit: null,
    }
  },
  computed: {
    ...mapGetters({
      agentList: 'agents/getAgents',
    }),
    maxAssignmentLimitErrors () {
      if (this.$v.maxAssignmentLimit.$error) {
        return this.$t(
          'INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR'
        )
      }
      return ''
    },
  },
  watch: {
    inbox () {
      this.setDefaults()
    },
  },
  mounted () {
    this.setDefaults()
  },
  methods: {
    setDefaults () {
      this.enableAutoAssignment = this.inbox.enableAutoAssignment
      this.maxAssignmentLimit =
        this.inbox.autoAssignmentConfig?.maxAssignmentLimit || null
      this.fetchAttachedAgents()
    },
    async fetchAttachedAgents () {
      try {
        const response = await this.$store.dispatch('inboxMembers/get', {
          inboxId: this.inbox.id,
        })
        const {
          data: inboxMembers,
        } = response
        this.selectedAgents = inboxMembers
      } catch (error) {
        //  Handle error
      }
    },
    handleEnableAutoAssignment () {
      this.updateInbox()
    },
    async updateAgents () {
      const agentList = this.selectedAgents.map(el => el.id)
      this.isAgentListUpdating = true
      try {
        await this.$store.dispatch('inboxMembers/create', {
          inboxId: this.inbox.id,
          agentList,
        })
        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'))
      } catch (error) {
        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'))
      }
      this.isAgentListUpdating = false
    },
    async updateInbox () {
      try {
        const payload = {
          id: this.inbox.id,
          enableAutoAssignment: this.enableAutoAssignment,
          autoAssignmentConfig: {
            maxAssignmentLimit: this.maxAssignmentLimit,
          },
        }
        await this.$store.dispatch('inboxes/setConversationAssignment', payload)
        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'))
      } catch (error) {
        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'))
      }
    },
  },
  validations: {
    selectedAgents: {
      isEmpty () {
        return !!this.selectedAgents.length
      },
    },
    maxAssignmentLimit: {
      minValue: minValue(1),
    },
  },
}
</script>

<style scoped lang="scss">
@import '~@/assets/scss/variables';
@import '~@/assets/scss/mixins';

.max-assignment-container {
  padding-top: var(--space-slab);
  padding-bottom: var(--space-slab);
}
</style>
